<template>
  <div class="mod-yckj__ordertech">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.id" placeholder="订单号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.projectName" placeholder="项目名称" clearable></el-input>
      </el-form-item>
      <el-form-item prop="bkId" label="技术员">
        <el-select style="width: 300px"
                   v-model="state.dataForm.bkId"
                   filterable remote reserve-keyword
                   placeholder="输入手机号或姓名"
                   :remote-method="getUserList"
                   :loading="loading" clearable>
          <el-option v-for="item in userList" :key="item.value"
                     :label="item.username+'-'+item.mobile" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="state.dataForm.startTime" value-format="YYYY-MM-DD HH:mm:ss.000Z"
                        type="datetime" placeholder="开始时间"/>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="state.dataForm.endTime" value-format="YYYY-MM-DD HH:mm:ss.000Z"
                        type="datetime" placeholder="结束时间"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border
              @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <!--      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
      <el-table-column prop="id" label="订单号" header-align="center" align="center" width="80"></el-table-column>
      <!--      <el-table-column prop="projectId" label="项目id" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="projectName" label="项目名称" header-align="center" align="center"></el-table-column>
      <!--      <el-table-column prop="machineId" label="机器id" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="machineName" label="机器名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="userName" label="预约人" header-align="center" align="center"></el-table-column>
      <el-table-column prop="showTimes" label="预约日期" header-align="center" align="center" width="260">
        <template v-slot="scope">
          <span v-for="(item, index) in scope.row.showTimes" :key="index">
            <span v-html="item"></span> <br/>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="bookTotalTime" label="工时" header-align="center" align="center"></el-table-column>
      <el-table-column prop="bkName" label="操作员" header-align="center" align="center"></el-table-column>
    </el-table>
    <div style="float: left; line-height: 66px; font-weight: 500">
      <span>总工时：{{ state.totalNum }}</span>
    </div>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
                   :total="state.total" layout="total, sizes, prev, pager, next, jumper"
                   @size-change="state.pageSizeChangeHandle"
                   @current-change="state.pageCurrentChangeHandle"></el-pagination>

  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import {reactive, ref, toRefs} from "vue";
import baseService from "@/service/baseService";

const loading = ref(false);
const userList = ref<any[]>([]);

const view = reactive({
  deleteIsBatch: true,
  getDataListURL: "/yckj/order/tech/page",
  getDataListIsPage: true,
  dataForm: {
    id: "",
    projectName: "",
    machineType: 1,
    bkId: "",
    startTime: "",
    endTime: ""
  }
});

// 获取三个月前的毫秒数
let threeMonthsAgoTimestamp = new Date().getTime() - 3 * 30 * 24 * 60 * 60 * 1000;
// 根据毫秒数创建三个月前的日期对象
let date = new Date(threeMonthsAgoTimestamp);
// 获取月份
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, "0");
let day = date.getDay().toString().padStart(2, "0");
let dateStr = year + "-" + month + "-" + day + " 00:00:00.000Z";
view.dataForm.startTime = dateStr;
const state = reactive({...useView(view), ...toRefs(view)});

// 获取用户列表
const getUserList = async (query: string) => {
  loading.value = true;
  const res = await baseService.get("/sys/user/listTech", {key: query});
  userList.value = res.data;
  loading.value = false;
};
</script>

<style>
.order_txt {
  font-weight: bolder;
  font-size: 16px;
  color: #17B3A3;
}
</style>
